<template>
  <!-- 物资目录选择弹窗 -->
  <a-modal
    :visible="dialogVisibel"
    class="normal-modal"
    title="选择物资目录"
    centered
    :confirm-loading="confirmLoading"
    :ok-button-props="{ props: { disabled: !selectRows || selectRows.filter((item) => !item.isHas).length === 0 } }"
    @cancel="dialogVisibel = false"
    @ok="
      $emit(
        'ok',
        selectRows.filter((item) => !item.isHas)
      )
    "
  >
    <!-- 搜索 -->
    <searchData :search-data="searchArr" @search="search" />
    <!-- 选中项列表 -->
    <div style="max-height: 85px; overflow: auto">
      <a-tag
        v-for="item of selectRows"
        :key="item.id"
        class="mb10p"
        closable
        color="#108ee9"
        @close="handleRemove(item)"
      >
        {{ item.mateClassName }}
      </a-tag>
    </div>
    <!-- 表格 -->
    <b-table
      ref="table"
      :columns="columns"
      :request="loadData"
      :scroll="{ y: 400 }"
      :select-config="{ use: true, type: 'checkbox', rowKey: 'id' }"
      :row-selection-config="rowSelection"
      row-key="id"
    />
  </a-modal>
</template>
<script>
import { findCatalogList } from '@/api/material/goods/goods'

export default {
  name: 'SelectMaterialDir',
  props: {
    // 已存在的物料目录
    exsistDatas: {
      type: Array,
      default: () => []
    },
    // 弹窗显隐控件
    visible: {
      type: Boolean,
      default: () => false
    },
    // 确认按钮loading
    confirmLoading: {
      type: Boolean,
      defaukt: () => false
    },
    // 已存在的物料目录是否选中
    isOutSelected: {
      type: Boolean,
      defaukt: () => true
    }
  },
  data() {
    return {
      searchArr: [
        {
          name: '物资目录名称',
          value: 'mateClassName',
          type: 'input'
        },
        {
          name: '物资目录编码',
          value: 'mateClassCode',
          type: 'input'
        },

        {
          name: '上级物资目录名称',
          value: 'mateClassParentName',
          type: 'input'
        },
        {
          name: '上级物资目录编码',
          value: 'mateClassParentCode',
          type: 'input'
        },
        {
          name: '规格',
          value: 'specificationModel',
          type: 'input'
        }
      ],
      columns: [
        {
          title: '物资目录名称',
          dataIndex: 'mateClassName'
        },
        {
          title: '物资目录编码',
          dataIndex: 'mateClassCode'
        },
        {
          title: '上级目录名称',
          dataIndex: 'parentCatalogName'
        },
        {
          title: '上级目录编码',
          dataIndex: 'parentCatalogCode'
        }
      ],
      queryParam: {},
      selectRows: [], // 选中列表
      selectedRowKeys: [], // 选中id枚举
      loadData: (params) => findCatalogList(Object.assign(params, this.queryParam, { commonStatus: 1, leaf: 3 }))
    }
  },
  watch: {
    visible(e) {
      if (e) {
        if (this.isOutSelected) {
          let exsistDatas = this.$clone(this.exsistDatas)
          exsistDatas.forEach((item) => {
            item.mateClassName = item.secondaryMaterialList
            item.mateClassCode = item.materialCode
            item.id = item.materialId
            item.isHas = true
          })
          this.selectRows = exsistDatas
          this.selectedRowKeys = exsistDatas.map((item) => item.id)
        }
        this.search()
      } else {
        // 重置初始化
        this.selectedRowKeys = []
        this.selectRows = []
        this.exsistDatas.length = 0
      }
    }
  },
  computed: {
    // 弹窗显隐控件
    dialogVisibel: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    },
    // 行选择配置
    rowSelection() {
      return {
        getCheckboxProps: (record) => ({
          props: {
            // 禁用已选的物料目录
            disabled: this.exsistDatas?.some((item) => item.materialId === record.id)
          }
        }),
        selectedRowKeys: this.selectedRowKeys,
        onSelect: this.onSelect,
        onSelectAll: this.onSelectAll
      }
    }
  },
  methods: {
    /**
     * @description: 移除选中项
     * @param {*} record 选中项
     */
    handleRemove(record) {
      this.selectedRowKeys = this.selectedRowKeys.filter((item) => item !== record.id)
      this.selectRows = this.selectRows.filter((item) => item.id !== record.id)
    },
    /**
     * @description: 单选
     * @param {*} record 选中项
     * @param {*} selected 是否选中
     */
    onSelect(record, selected) {
      if (selected) {
        // 添加选择项
        this.selectedRowKeys.push(record.id)
        this.selectRows.push(record)
      } else {
        // 删除选择项
        this.handleRemove(record)
      }
    },
    /**
     * @description: 全选
     * @param {*} selected 是否选中
     * @param {*} record 选中项
     * @param {*} changeRows 改变项
     */
    onSelectAll(selected, selectedRows, changeRows) {
      if (selected) {
        // 添加选择项
        this.selectedRowKeys = [...new Set(this.selectedRowKeys.concat(selectedRows.map((item) => item.id)))] // 去重
        this.selectRows = this.selectRows.concat(
          selectedRows.filter((item) => !this.selectRows.map((i) => i.id).includes(item.id))
        )
      } else {
        // 删除选择项
        this.selectedRowKeys = this.selectedRowKeys.filter((item) => changeRows.every((i) => i.id !== item))
        this.selectRows = this.selectRows.filter((item) => changeRows.every((i) => i.id !== item.id))
      }
    },
    /**
     * @description: 搜索
     * @param {*} val 关键词
     */
    search(val) {
      val && (this.queryParam = val)
      this.$refs.table?.getData(null, true)
    }
  }
}
</script>
